jeffemmett
/
non-fungible-apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: drip stitches exports (#210)

This commit is contained in:
Felipe Mendes 2023-04-10 11:34:06 -03:00 committed by GitHub
parent 389d6511b3
commit df3e59f8a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 47 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/card/card.styles.ts
View File

@ -1,6 +1,4 @@
import { dripStitches } from '@/theme';
const { styled } = dripStitches;
import { styled } from '@/theme';
export abstract class CardStyles {
static readonly Container = styled('div', {

4
ui/src/components/core/avatar/avatar.styles.ts
View File

@ -1,8 +1,6 @@
import * as Avatar from '@radix-ui/react-avatar';
import { dripStitches } from '@/theme';
const { styled } = dripStitches;
import { styled } from '@/theme';
export abstract class AvatarStyles {
static readonly Root = styled(Avatar.Root, {

5
ui/src/components/core/button/button-content.styles.ts
View File

@ -1,7 +1,6 @@
import { dripStitches } from '../../../theme'; //TODO replace with absolute path
import { Flex, Grid } from '../../layout';
import { styled } from '@/theme';
const { styled } = dripStitches;
import { Flex, Grid } from '../../layout';
export const StyledButtonContentGrid = styled(Grid, {
gap: '$0h',

4
ui/src/components/core/button/button-icon.styles.ts
View File

@ -1,6 +1,4 @@
import { dripStitches } from '../../../theme'; //TODO replace with absolute path
const { styled } = dripStitches;
import { styled } from '@/theme';
export const StyledButtonIconSpan = styled('span', {
all: 'unset',

5
ui/src/components/core/button/button-spinner.styles.ts
View File

@ -1,7 +1,6 @@
import { dripStitches } from '../../../theme'; //TODO replace with absolute path
import { Flex, Grid } from '../../layout';
import { styled } from '@/theme';
const { styled } = dripStitches;
import { Flex, Grid } from '../../layout';
export const StyledButtonSpinnerBox = styled(Flex, {
alignItems: 'center',

5
ui/src/components/core/button/button-spinner.tsx
View File

@ -1,6 +1,7 @@
import React, { HTMLAttributes, useMemo } from 'react';
import { dripStitches } from '../../../theme'; //TODO replace with absolute path
import { keyframes } from '@/theme';
import {
ButtonSpinnerProps,
StyledButtonSpinnerBox,
@ -35,8 +36,6 @@ export const ButtonSpinner: React.FC<ButtonSpinnerProps> = (props) => {
);
};
const { keyframes } = dripStitches;
const blink = keyframes({
'0%': { opacity: 0.2 },
'50%': { opacity: 1 },

4
ui/src/components/core/button/button.styles.ts
View File

@ -1,6 +1,6 @@
import { CSS } from '@stitches/react';
import { dripStitches } from '../../../theme';
import { styled } from '@/theme';
type StyledButtonProps = React.ComponentPropsWithRef<typeof StyledButton>;
export interface ButtonProps extends StyledButtonProps {
@ -149,8 +149,6 @@ const getButtonCompoundVariant = ({
}
};
const { styled } = dripStitches;
export const StyledButton = styled('button', {
all: 'unset',
cursor: 'pointer',

4
ui/src/components/core/icon/icon.styles.ts
View File

@ -1,6 +1,4 @@
import { dripStitches } from '../../../theme'; //TODO replace for absolute path
const { styled } = dripStitches;
import { styled } from '@/theme';
export abstract class IconStyles {
static readonly Container = styled('span', {

4
ui/src/components/core/input/input-file.styles.ts
View File

@ -1,7 +1,5 @@
import { Flex } from '@/components/layout';
import { dripStitches } from '@/theme';
const { styled } = dripStitches;
import { styled } from '@/theme';
export abstract class InputFileStyles {
static readonly Container = styled(Flex, {

3
ui/src/components/core/input/input.styles.ts
View File

@ -1,7 +1,6 @@
import { dripStitches } from '@/theme';
import { styled } from '@/theme';
import { Icon } from '../icon';
const { styled } = dripStitches;
const styles = {
all: 'unset',

4
ui/src/components/core/separator.styles.ts
View File

@ -1,6 +1,4 @@
import { dripStitches } from '@/theme';
const { styled } = dripStitches;
import { styled } from '@/theme';
export const Separator = styled('hr', {
borderTop: '1px solid $slate6',

4
ui/src/components/core/text/text.styles.ts
View File

@ -1,5 +1,3 @@
import { dripStitches } from '@/theme';
const { styled } = dripStitches;
import { styled } from '@/theme';
export const Text = styled('span');

4
ui/src/components/form/form.styles.ts
View File

@ -1,7 +1,7 @@
import { dripStitches } from '../../theme';
import { styled } from '@/theme';
import { Flex } from '../layout';
const { styled } = dripStitches;
export abstract class FormStyles {
static readonly Field = styled(Flex, {
flexDirection: 'column',

4
ui/src/components/layout/flex.styles.ts
View File

@ -1,8 +1,6 @@
import React from 'react';
import { dripStitches } from '../../theme'; //TODO replace with absolute path
const { styled } = dripStitches;
import { styled } from '@/theme';
export const Flex = styled('div', {
display: 'flex',

4
ui/src/components/layout/grid.styles.ts
View File

@ -1,6 +1,4 @@
import { dripStitches } from '../../theme'; //TODO replace with absolute path
const { styled } = dripStitches;
import { styled } from '@/theme';
export const Grid = styled('div', {
display: 'grid',

3
ui/src/components/layout/nav-bar/nav-bar.styles.ts
View File

@ -1,8 +1,7 @@
import { dripStitches } from '@/theme';
import { styled } from '@/theme';
import { Flex } from '../flex.styles';
const { styled } = dripStitches;
export abstract class NavBarStyles {
static readonly Container = styled('header', {
position: 'sticky',

4
ui/src/components/layout/page/page.styles.ts
View File

@ -1,6 +1,4 @@
import { dripStitches } from '@/theme';
const { styled } = dripStitches;
import { styled } from '@/theme';
export abstract class PageStyles {
public static readonly Container = styled('div', {

4
ui/src/components/layout/skeleton.styles.ts
View File

@ -1,6 +1,4 @@
import { dripStitches } from '@/theme';
const { styled, keyframes } = dripStitches;
import { keyframes, styled } from '@/theme';
const SkeletonKeyframes = keyframes({
'0%': {

4
ui/src/components/layout/stepper/stepper.styles.ts
View File

@ -1,6 +1,4 @@
import { dripStitches } from '../../../theme';
const { styled } = dripStitches;
import { styled } from '@/theme';
export abstract class StepperStyles {
static readonly Rail = styled('div', {

3
ui/src/components/logo/logo.styles.ts
View File

@ -1,8 +1,7 @@
import { dripStitches } from '@/theme';
import { styled } from '@/theme';
import { Flex } from '../layout';
const { styled } = dripStitches;
export abstract class LogoStyles {
static readonly Container = styled(Flex, {
cursor: 'pointer',

4
ui/src/components/nfa-card/nfa-card.styles.ts
View File

@ -1,11 +1,9 @@
import { Link } from 'react-router-dom';
import { dripStitches } from '@/theme';
import { styled } from '@/theme';
import { Skeleton } from '../layout';
const { styled } = dripStitches;
export const NFACardStyles = {
Container: styled(Link, {
display: 'flex',

4
ui/src/components/nfa-preview/nfa-preview.tsx
View File

@ -1,8 +1,6 @@
import { useMemo } from 'react';
import { dripStitches, forwardStyledRef } from '@/theme';
const { styled } = dripStitches;
import { forwardStyledRef, styled } from '@/theme';
const StyledSVG = styled('svg');

4
ui/src/components/spinner/spinner.styles.ts
View File

@ -1,6 +1,4 @@
import { dripStitches } from '@/theme';
const { styled } = dripStitches;
import { styled } from '@/theme';
export abstract class SpinnerStyles {
static readonly Container = styled('svg', {

4
ui/src/components/toast/toast.styles.tsx
View File

@ -1,12 +1,10 @@
import * as ToastLib from '@radix-ui/react-toast';
import { dripStitches } from '@/theme';
import { keyframes, styled } from '@/theme';
import { Icon, IconButton } from '../core';
import { Flex } from '../layout';
const { styled, keyframes } = dripStitches;
export abstract class ToastStyles {
static readonly Provider = ToastLib.Provider;

4
ui/src/theme/key-frames.ts
View File

@ -1,6 +1,4 @@
import { dripStitches } from './themes';
const { keyframes } = dripStitches;
import { keyframes } from './themes';
export const KeyFrames = {
slideUpAndFade: keyframes({

17
ui/src/theme/themes.ts
View File

@ -30,7 +30,7 @@ export interface CreateDripStitchesConfig<
utils?: ConfigType.Utils<Utils>;
}
export const createDripStitches = <
const createDripStitches = <
Prefix extends string = '',
Media extends {} = {},
Theme extends {} = {},
@ -131,4 +131,17 @@ export const createDripStitches = <
};
};
export const dripStitches = createDripStitches();
export const {
styled,
css,
config,
globalCss,
createTheme,
darkTheme,
darkThemeSelector,
getCssText,
keyframes,
prefix,
theme,
reset,
} = createDripStitches();

4
ui/src/views/explore/explore.styles.ts
View File

@ -1,7 +1,5 @@
import { Flex } from '@/components';
import { dripStitches } from '@/theme';
const { styled } = dripStitches;
import { styled } from '@/theme';
export abstract class Explore {
static readonly Container = styled(Flex, {

4
ui/src/views/explore/header.styles.ts
View File

@ -1,7 +1,5 @@
import { Flex } from '@/components';
import { dripStitches } from '@/theme';
const { styled } = dripStitches;
import { styled } from '@/theme';
export abstract class Header {
static readonly Container = styled(Flex, {

4
ui/src/views/explore/list-nfas/results.styles.ts
View File

@ -1,6 +1,4 @@
import { dripStitches } from '@/theme';
const { styled } = dripStitches;
import { styled } from '@/theme';
export const ResultsContainer = styled('div', {
fontSize: '$xl',