mirror of
https://github.com/hanzoai/cd-ui.git
synced 2026-10-30 20:42:45 +00:00
Anton GilgurandGitHub
d1f1d4496b
* chore(storybook): update v1 syntax to use Storybook v6
- while the deps used Storybook v6, the configuration and stories themselves were still on a legacy v5 format
- v6 had backward compat for v5, but v7 does not, so this needs upgrading/migrating
- or well, v7 has some legacy mode for it that can be enabled with some config, but it is entirely gone in v8
- migrate `storiesOf` to CSF per https://storybook.js.org/docs/7/migration-guide#storiesof-to-csf
- then had to do a bunch of manual changes to get back mostly the same previous indentation (with some minor differences where there were mistakes or inconsistencies)
- tried to keep the diff as small as possible
- CSF is still valid through to latest v8
Signed-off-by: Anton Gilgur <[email protected]>
* chore(storybook): convert v1 config to use Storybook v6
- modified version of v2's config
Signed-off-by: Anton Gilgur <[email protected]>
* fixup config a bit -- take more from prev webpack config
- `ts-loader` is necessary to handle the `import type` syntax
- custom `tsconfig.json` doesn't seem necessary though
- use same SASS config
- plain CSS config not needed though bc PostCSS already runs by default
Signed-off-by: Anton Gilgur <[email protected]>
* rename to `.stories.tsx` and remove `index`
- the conventional format
- also had some problems finding stories without this change
Signed-off-by: Anton Gilgur <[email protected]>
* fix deprecation warning re: `storyName`
- per https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations
- migrate `.story.name` -> `.storyName`
- not sure why the automigration didn't do this and instead used the deprecated name 😕
Signed-off-by: Anton Gilgur <[email protected]>
* also fix history deprecation warning
Signed-off-by: Anton Gilgur <[email protected]>
* attempt to load CSS properly but still fail
Signed-off-by: Anton Gilgur <[email protected]>
* improve perf with built in loader for TS
- remove `ts-loader` as not necessary
- plus some settings for Storybook's TS loader preset
Signed-off-by: Anton Gilgur <[email protected]>
* diff reduction
Signed-off-by: Anton Gilgur <[email protected]>
* more diff reduction
Signed-off-by: Anton Gilgur <[email protected]>
* more diff reduction
Signed-off-by: Anton Gilgur <[email protected]>
* attempt to reduce diff a bit more hackily
Signed-off-by: Anton Gilgur <[email protected]>
* one more diff reduction with one hackishness
Signed-off-by: Anton Gilgur <[email protected]>
* diff reduction with older wacky syntax
Signed-off-by: Anton Gilgur <[email protected]>
* slightly better syntax than previous while retaining indentation
Signed-off-by: Anton Gilgur <[email protected]>
* last diff reduction/indentation change
Signed-off-by: Anton Gilgur <[email protected]>
* missing trailing comma
Signed-off-by: Anton Gilgur <[email protected]>
---------
Signed-off-by: Anton Gilgur <[email protected]>
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import {default as classNames} from 'classnames';
|
|
import * as React from 'react';
|
|
|
|
export default {
|
|
title: 'Table',
|
|
};
|
|
|
|
class TableExample extends React.Component<any, {selectedIndex: number}> {
|
|
|
|
constructor(props: any) {
|
|
super(props);
|
|
this.state = { selectedIndex: 0 };
|
|
}
|
|
|
|
public render() {
|
|
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
|
return (
|
|
<div className='argo-table-list argo-table-list--clickable'>
|
|
<div className='argo-table-list__head'>
|
|
<div className='row'>
|
|
<div className='columns small-2'> Header 1 </div>
|
|
<div className='columns small-5'> Header 2 </div>
|
|
<div className='columns small-5'> Header 3 </div>
|
|
</div>
|
|
</div>
|
|
{items.map((item, i) => (
|
|
<div className={classNames('argo-table-list__row', { selected: i === this.state.selectedIndex })} key={i} onClick={() => this.setState({ selectedIndex: i })}>
|
|
<div className='row'>
|
|
<div className='columns small-2'> Cell 1 {item} </div>
|
|
<div className='columns small-5'> Cell 2 {item}</div>
|
|
<div className='columns small-5'> Cell 3 {item}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export const Default = () => <TableExample />;
|
|
Default.storyName = 'default';
|